<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建光源</title>
    <script src="js/three73.js"></script>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="WebGL-output"></div>

<script>
    window.onload = function(){
        var scene = new THREE.Scene();  //定义场景

        var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //定义相机

        //定义渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0xEEEEEE);
        renderer.setSize(window.innerWidth,window.innerHeight);
        //允许阴影映射：真，
        // 还需要明确定义哪些物体投射阴影，哪些物体接受阴影，
        // 以及定义哪个光源可以产生阴影
        renderer.shadowMapEnabled = true;

        //创建一个坐标轴对象并添加到场景中
        var axex = new THREE.AxisHelper(20);
        scene.add(axex);

        //创建一个光源
        //由于不同的材质对光源的反应并不相同，我们在前一个示例中使用的基础材质
        // MeshBasicMaterial不会对场景中的光源产生反应，而只会以指定的颜色渲染物体
        //本例中材质改为MeshLamberMaterial
        //three.js中有两种材质可以对光源产生反应：MeshLambertMaterial 和 MeshPhoneMateral
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40,60,-10);
        spotLight.castShadow = true;  //该光源能产生阴影
        scene.add(spotLight);

        //创建一个平面
        var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);   //宽60，高20
        var planeMaterial = new THREE.MeshLambertMaterial({color:0xcccccc});  //材质颜色
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);   //合并在一个名叫plane的网格对象中

        //定义平面的位置
        plane.rotation.x = -0.5*Math.PI;

        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;

        plane.receiveShadow = true;//接受阴影

        scene.add(plane);

        //创建一个方块，要把wireframe（线框）属性设为true，球体同
        var cubeGeometry = new THREE.CubeGeometry(4,4,4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000});
        var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;

        cube.castShadow = true; //投射阴影

        scene.add(cube);

        //创建一个球体
        var sphereGeometry = new THREE.SphereGeometry(4,20,20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;

        sphere.castShadow = true;//投射阴影

        scene.add(sphere);

        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);  //指向场景的中心

        //输出到页面
        document.getElementById('WebGL-output').appendChild(renderer.domElement);
        renderer.render(scene,camera);

    }
</script>
</body>
</html>